<template>
    <div>


        <div class=" app_width">

            <el-table stripe border fit highlight-current-row
                      :key='tableKey'
                      :data="listData"
                      v-loading="listLoading"
                      element-loading-text="正在加载..."
                      style="width: 100%"

            >


                <el-table-column align="center" header-align="center" label="总价" width="120">
                    <template #default="scope">
                        {{ scope.row.orders_all }}
                    </template>
                </el-table-column>


                <el-table-column align="center" header-align="center" label="购买日期">
                    <template #default="scope">
                        {{ scope.row.addtime }}

                    </template>
                </el-table-column>

                <el-table-column align="left" header-align="center" label="收货地址" show-overflow-tooltip>
                    <template #default="scope">
                        {{ scope.row.ordersaddress }}
                    </template>
                </el-table-column>
                <el-table-column align="center" header-align="center" label="备注">
                    <template #default="scope">

                        {{ scope.row.memo }}

                    </template>
                </el-table-column>

                <el-table-column align="center" label="操作">
                    <template #default="scope">

                        <el-button text size="small" @click="handleitemView(scope,0)">
                            商品明细
                        </el-button>


                        <span v-if="scope.row.status=='交易成功'"></span>
                    </template>
                </el-table-column>
            </el-table>

            <!--单列标准尺寸 width="40%" top="10vh"-->
            <el-dialog :close-on-click-modal="false" title="商品明细" v-model="dialogFormVisible"
                       width="80%" top="5vh">
                <orderitem-form
                    :dialogFormVisible="dialogFormVisible"
                    :dataId='dialogFormId'
                    :viewISevaluate='dialogForm_viewISevaluate'
                    @close="closeDialog"
                    :newRow.sync="newRowDataId"
                >
                </orderitem-form>
            </el-dialog>

            <!--单列标准尺寸 width="40%" top="10vh"-->
            <el-dialog :close-on-click-modal="false" title="在线支付" v-model="dialogFormVisible_pay"
                       width="40%" top="5vh">
                <orderspay-form
                    :dialogFormVisible="dialogFormVisible_pay"
                    :dataId='dialogFormId'
                    @close="closeDialog"
                >
                </orderspay-form>
            </el-dialog>

        </div>


    </div>

</template>
<script name="search" setup>

import {onMounted, ref} from "vue";

const postFormRef = ref(null) // 如果页面有表单,则使用此ref
const route = useRoute();   //获取路由中的信息或参数
const router = useRouter();   //操作路由,跳转之类的
import {ElMessage, ElMessageBox} from "element-plus";  //提示框和消息



import axios_request from '../../util/axios_request.js'

import orderitemForm from "./orders_item.vue";
import orderspayForm from "./orders_pay.vue";
import {useRoute, useRouter} from "vue-router";


const tableKey = ref(0)//表格key

const listData = ref(null)//列表数据
const listLoading = ref(false)//加载提示
//对话框
const dialogFormVisible = ref(false)//是否显示对应框
//商品明细
const dialogFormVisible_pay = ref(false)//是否显示对应框  支付
const dialogFormId = ref(0)//编辑时的ID

const dialogForm_viewISevaluate = ref(0)//viewISevaluate   0查看商品明细
const newRowDataId = ref(0)//添加或编辑后的新行的值




onMounted(() => {
    getList()

})


function getList() {

    listLoading.value = true
    axios_request.get('/web/myOrders.action').then(response => {
        listData.value = response.data

        listLoading.value = false
    })
}

//状态改变
function handleOver(scope, status) {

    ElMessageBox.confirm("确定要进行此操作吗?", "提示").then(() => {
        const id = scope.row.ordersid


        axios_request.post('/web/over.action?id=' + id + '&status=' + status).then(response => {
            ElMessage({
                message: response.msg
            })
            if (response.msg) {
                getList()
            }

        })
    }).catch(() => {
    });

}

//支付
function handlePay(scope) {

    //支付 过程

    dialogFormId.value = parseInt(scope.row.ordersid) //当前操作的ID

    dialogFormVisible_pay.value = true


}


//显示商品明细
function handleitemView(scope, viewISevaluate) {

    //console.log(id)
    //viewISevaluate   0查看商品明细
     dialogFormId.value = parseInt(scope.row.ordersid) //当前操作的ID
    dialogForm_viewISevaluate.value = viewISevaluate

    dialogFormVisible.value = true
}

//关闭 弹窗
function closeDialog() {
    dialogFormVisible.value = false;    //隐藏el-dialog
    dialogFormVisible_pay.value = false;    //隐藏el-dialog
    getList()
}




</script>


